<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <jgsearch :searchData="searchData" @on-change-change="askData" @on-change-changes="askDatadate">
        <template v-slot:button>
          <RadioGroup v-model="patientDate" type="button" @on-change="changeradio">
            <Radio :label="item.value" v-for="item in daydata" :key="item.value">{{ item.name }}</Radio>
          </RadioGroup>
        </template>
      </jgsearch>
      <Table highlight-row :columns="columns" @on-cell-click="cellClick" :data="data" :loading="loading" border
        show-summary>
        <template slot="sum_repeat_patient" slot-scope="{ row }">
          <a v-if="row.sum_repeat_patient" @click="detail(row)">{{ row.sum_repeat_patient }}</a>
          <span style="color:#515a6e" v-else>{{ row.sum_repeat_patient }}</span>
        </template>
      </Table>
    </Card>
    <Drawer title="重复数据" v-model="returnVisitDetail" width="70%" @on-close="closedrawer">
      <Table row-key="id" :columns="columns2" :loading="loadings" :data="data2" border>
        <template slot="status_name" slot-scope="{ row }">
          <div v-if="row.status_name">
            <Tag type="border" v-if="row.status_name === '预约'" color="#52c41a">预约</Tag>
            <Tag type="border" v-else-if="row.status_name === '无效'" color="#f5222d">无效</Tag>
            <Tag type="border" v-else-if="row.status_name === '跟进中'" color="#1890ff">跟进中</Tag>
            <Tag type="border" v-else color="default">{{row.status_name}}</Tag>
          </div>
        </template>
        <template slot="user_name" slot-scope="{ row }">
          <span>
            {{row.user_name}}
          </span>
          <span v-if="row.gender === '0'">未知</span>
          <span v-if="row.gender === '1'">男</span>
          <span v-if="row.gender === '2'">女</span>
          <span v-if="+row.age">
            {{row.age}}
          </span>
        </template>
        <template slot="patient_name" slot-scope="{ row }">
          <div style="margin-left: 15px;">
            <span>
              {{row.patient_name}}
            </span>
            <span v-if="row.patient_gender === '0'">未知</span>
            <span v-if="row.patient_gender === '1'">男</span>
            <span v-if="row.patient_gender === '2'">女</span>
            <span v-if="+row.patient_age">
              {{row.patient_age}}
            </span>
          </div>
        </template>
        <template slot="belong_member_name" slot-scope="{ row }">
          <div v-if="row.patient_data_type === '0'">
            {{row.belong_member_name}}
          </div>
        </template>
      </Table>
      <div style="display: flex; justify-content:center;margin-top:20px">
        <Page show-total show-elevator show-sizer :total="total" :current.sync="paramss.page"
          :page-size="paramss.pageSize" :page-size-opts="pageOpts" @on-change="formSize"
          @on-page-size-change="formChangePage" />
      </div>
    </Drawer>
  </div>
</template>

<script>
  import jgsearch from "@/components/search";
  import patientDetail from "@/components/patientDetail";
  import {
    serviceReportList,
    serviceReportListC,
  } from "@api/hqapi/indexone";
  import dayjs from "dayjs";
  export default {
    name: "index",
    components: { jgsearch, patientDetail },
    data() {
      return {
        loadings: false,
        daydata: [
          { value: "toDay", name: "日" },
          { value: "sevenDay", name: "周" },
          { value: "month", name: "月" },
        ],
        loading: false,
        patientDate: "sevenDay",
        model2: "",
        returnVisitDetail: false,
        total: 0,
        pageOpts: [10, 20, 30, 50],
        // 列表宽度产品定的
        columns2: [
          {
            title: "线索数据", align: "center", children: [
              { title: '基本信息', align: "center", slot: 'user_name', minWidth: 150 },
              { title: '手机号', align: "center", key: 'mobile', minWidth: 125 },
              { title: '微信号', align: "center", key: 'wechat_num', minWidth: 125 },
              { title: '抖音号', align: "center", key: 'dy_num', minWidth: 125 },
              { title: '录入时间', align: "center", key: 'created_at', minWidth: 150 },
            ]
          },
          {
            title: "患者数据", align: "center", children: [
              { title: '基本信息', align: "center", slot: 'patient_name', minWidth: 170, tree: true },
              { title: '状态', align: "center", slot: 'status_name', minWidth: 130 },
              { title: '归属人', align: "center", slot: 'belong_member_name', minWidth: 130 },
              { title: '创建时间', align: "center", key: 'patient_created_at', minWidth: 150 },
            ]
          },
        ],
        data2: [],
        columns: [
          { title: "人员", key: "realname", align: "center", width: 118, fixed: "left", },
          { title: "录入总数", key: "sum_input", align: "center", width: 118, sortable: true },
          { title: "重复线索", key: "sum_repeat_clue", align: "center", width: 118, sortable: true },
          { title: "重复患者", slot: "sum_repeat_patient", key: "sum_repeat_patient", align: "center", width: 118, sortable: true },
          { title: "正常", key: "sum_normal", align: "center", width: 118, sortable: true },
          {
            title: "线索状态", align: "center",
            children: []
          },

        ],
        data: [],
        params: { start_time: "", end_time: "", department_id: "" },
        paramss: {
          page: 1,
          pageSize: 10,
          repeat_patient_list: ""
        },
        searchData: {
          project: [
            { id: 1, key: "slot", keys: "button" },
            {
              id: 2,
              key: "DatePicker",
              type: "daterange",
              options: {
                disabledDate(date) {
                  return date && date.valueOf() > Date.now();
                },
              },
              value: [],
              callback: "changes",
            },
            {
              id: 3,
              key: "Select",
              clearable: true,
              placeholder: "部门类型",
              value: "",
              childList: [],
              callback: "change",
            },
          ],
        },
      };
    },
    mounted() {
      this.initial();
    },
    methods: {
      detail(row) {
        this.paramss.repeat_patient_list = row.repeat_patient_list
        this.askDatas()
      },
      closedrawer() {
        this.paramss.page = 1;
        this.paramss.pageSize = 20;
        this.total = 0;
      },
      cellClick(row) {
      },
      // 打开患者详细
      handleDetailPatient(row) {
        this.$refs.patientDetail.handleOpen(row);
      },
      /* @函数功能: 分页 */
      formSize(e) {
        this.paramss.page = e;
        this.askDatas();
      },
      /* @函数功能: 每页数量 */
      formChangePage(e) {
        this.paramss.pageSize = e;
        this.askDatas();
      },
      initial() {
        this.changeradio(this.patientDate);
      },
      askData() {
        this.loading = true;
        this.searchData.project.forEach((item) => {
          if (item.id === 2) {
            this.params.start_time = item.value[0];
            this.params.end_time = item.value[1];
          } else if (item.id === 3) {
            this.params.department_id = item.value;
          }
        });
        serviceReportList(this.params).then((res) => {
          this.searchData.project.forEach((item) => {
            if (item.id === 3) item.childList = res.department_list;
          });
          this.columns[5].children = [];
          for (let item of res.common_status_list) {
            this.columns[5].children.push({ title: item.status_name, minWidth: 120, align: "center", key: +item.id, sortable: true });
          }
          this.status_name = res.common_status_list
          this.data = res.list;
          this.loading = false;
        });
      },
      askDatas() {
        this.loadings = true;
        serviceReportListC(this.paramss).then((res) => {
          this.loadings = false;
          this.total = res.total;
          this.data2 = res.list.map(ee => {
            let first = (ee.repeat_patient && ee.repeat_patient.length) ? ee.repeat_patient[0] : {}
            let children = (ee.repeat_patient) ? (ee.repeat_patient.filter(aa => aa.patient_id !== first.patient_id)) : []
            return {
              ...ee,
              ...first,
              children,
            }
          });
          this.returnVisitDetail = true
        });
      },
      askDatadate() {
        this.patientDate = "";
        this.askData();
      },
      changeradio(e) {
        let week = dayjs().$W;
        let year = dayjs().$y;
        let months = dayjs().$M + 1;
        let day = dayjs().format("YYYY-MM-DD");
        // let yesterDay = dayjs().subtract(1, "day").format("YYYY-MM-DD");
        let sevenDay = "";
        let num = undefined;
        if (week === 0) num = 7;
        else num = week;
        sevenDay = dayjs()
          .subtract(num - 1, "day")
          .format("YYYY-MM-DD");
        let month = dayjs(`${year}-${months}-1`).format("YYYY-MM-DD");
        if (e === "toDay") {
          this.searchData.project[1].value = [day, day];
        } else if (e === "sevenDay") {
          this.searchData.project[1].value = [sevenDay, day];
        } else if (e === "month") {
          this.searchData.project[1].value = [month, day];
        }
        this.params.start_time = this.searchData.project[1].value[0];
        this.params.end_time = this.searchData.project[1].value[1];
        this.askData();
      },
      sortchange(e) {
      },
    },
  };
</script>

<style scoped>
  /deep/.ivu-table-cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>